<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模版语法</title>
	<link rel="stylesheet" href="../style.css">
	<script src="../vue.js"></script>
</head>
<body>
	<p class="title">1插值</p>
	<p class="subtitle">1.1文本</p>
	<div id="app">
		<span>Message:{{msg}}</span>
		<br/>
		<span v-once>This will never change:{{msg}}</span>
	</div>
	<script>
		var app=new Vue({
			el:'#app',
			data:{
				msg:'Hello Vue.js'
			}
		})
	</script>

	<p class="subtitle">纯HTML</p>
	<div id="app2">
		<div v-html="rawHtml"></div>
	</div>
	<script>
		var app = new Vue({
			el:'#app2',
			data:{
				rawHtml:'<ul><li>1</li></ul>'
			}
		})
	</script>

	<p class="subtitle">属性</p>
	<style>
		#app3 div{
			width:200px;
			height: 200px;
			background-color:white;
		}
		#app3 #blue{
			background-color: blue;
		}
		#app3 #red{
			background-color: red;
		}
	</style>
	<div id="app3">
		<div id="show"></div>
		<div v-bind:id="id" v-on:click="changeColor"></div>
		<input v-bind:disabled="condition" id="ipt" value="input为禁用的">
		<input type="button" v-on:click="changeCondition" value="点击">
	</div>
	<script>
		var app3=new Vue({
			el:'#app3',
			data:{
				id:'blue',
				a:'1',
				condition:'disabled',
			},
			
			methods:{
				changeColor:function () {
					if(this.a){
						this.id="red";
						this.a=0;
					}else{
						this.id="blue";
						this.a=1;
					}
				},
				changeCondition:function(){
					// alert(this.condition)
					var abc=document.getElementById('ipt');
					abc.removeAttribute("disabled");
				}
			},
			created:function(){
				// alert('created successful');
			},
			
		})
	</script>

	<p class="title">指令</p>
	<div id="app4">
		<p v-if="seen">Now you see me "v-if"</p>
	</div>
	<script>
		var app4=new Vue({
			el:"#app4",
			data:{
				seen:true,
			}
		})
	</script>

	<p class="subtitle">参数</p>
	
	<form action="http://www.baidu.com" v-on:submit.prevent="onSubmit">
		<input type="submit">
	</form>
</body>
</html>